<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>主题</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .near-box {
            padding: 5px;
        }
        .jumbotron{
            padding-bottom: 0;
        }
        .infobox {
            position: absolute;
            width: 150px;
            height: 3em;
            padding: .5em;
            left: 30px;
            bottom: 60px;
            display: block;
            overflow: inherit;
            background: rgba(0, 0, 0, .4);
        }

        #header-box {
            display: block;
            position: relative;
        }

        .head {
            position: absolute;
            width: 80%;
            height: 3em;
            padding: .5em;
            left: 135px;
            display: block;
            font-size: 28pt;
            top: 100px;
        }
        #footer{
            width:100%;
            
        }
        .thumbnail{
            height:260px;
        }
      
    </style>
</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top" style="margin-bottom: 0">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#" style="color: blueviolet">DesignTo</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="homepage.html">首页</a>
                    </li>
                    <li class="active">
                        <a href="theme.html">主题</a>
                    </li>
                    <li>
                        <a href="custom.html">个性化</a>
                    </li>
                </ul>
                <div class="row nav nabbar-nav navbar-right" style="margin-top:.4em">
                   
                    <ul class="col-lg-3">
                        <li>
                            <button type="button" class="btn btn-defualt" onclick="window.location='usercenter_public.html';return false;">
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>User
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div class="jumbotron">
        <div class="container-fluid" id="header-box" style="background-image: url(img/1.jpg);background-size:100% 100%;height: 500px;width: 100%;">
            <div class="head">
                <label style="color: white;font-size:40pt;" class="h2">Hello,Designer!</label>
                <br />
                <label style="color: white;font-size:25pt" class="h4">This is a palce you can show your designs!</label>
                <br />
            </div>
        </div>

    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-3 near-box">
                            <div class="thumbnail">
                                <div class="infobox">
                                    <p style="color: white;margin:0;" class="h3">礼服</p>
                                </div>
                                <a href="theme_detail.html">
                                    <img src="手稿图/礼服/手稿21.jpg" class="img-rounded" style="height: 100%;">
                                </a>

                            </div>
                        </div>
                        <div class="col-md-3 near-box">
                            <div class="thumbnail">
                                <div class="infobox">
                                    <p style="color: white;margin:0;" class="h3">婚纱</p>
                                </div>
                                <a href="#">
                                    <img src="手稿图/婚纱/手稿72.jpg" class="img-rounded" style="height: 100%;">
                                </a>
                            </div>
                        </div>
                        <div class="col-md-3 near-box">
                            <div class="thumbnail">
                                <div class="infobox">
                                    <p style="color: white;margin:0;" class="h3">套装</p>
                                </div>
                                <a href="#">
                                    <img src="手稿图/套装/手稿10.jpg" class="img-rounded" style="height: 100%;">
                                </a>

                            </div>
                        </div>
                        <div class="col-md-3 near-box">
                            <div class="thumbnail">
                                <div class="infobox">
                                    <p style="color: white;margin:0;" class="h3">动漫装</p>
                                </div>
                                <a href="#">
                                    <img src="手稿图/动漫装/手稿28.jpg" class="img-rounded" style="height: 100%;">
                                </a>

                            </div>
                        </div>
                        <div class="col-md-3 near-box">
                            <div class="thumbnail">
                                <div class="infobox">
                                    <p style="color: white;margin:0;" class="h3">男装</p>
                                </div>
                                <a href="#">
                                    <img src="手稿图/男装/手稿56.jpg" class="img-rounded" style="height: 100%;">
                                </a>

                            </div>
                        </div>
                        <div class="col-md-3 near-box">
                                <div class="thumbnail">
                                    <div class="infobox">
                                        <p style="color: white;margin:0;" class="h3">旗袍</p>
                                    </div>
                                    <a href="#">
                                        <img src="手稿图/旗袍/手稿41.jpg" class="img-rounded" style="height: 100%;">
                                    </a>
    
                                </div>
                            </div>
                            <div class="col-md-3 near-box">
                                    <div class="thumbnail">
                                        <div class="infobox">
                                            <p style="color: white;margin:0;" class="h3">首饰</p>
                                        </div>
                                        <a href="#">
                                            <img src="手稿图/首饰/手稿68.jpg" class="img-rounded" style="height: 100%;">
                                        </a>
        
                                    </div>
                                </div>
                                <div class="col-md-3 near-box">
                                        <div class="thumbnail">
                                            <div class="infobox">
                                                <p style="color: white;margin:0;" class="h3">内衣</p>
                                            </div>
                                            <a href="#">
                                                <img src="手稿图/内衣/手稿59.jpg" class="img-rounded" style="height: 100%;">
                                            </a>
            
                                        </div>
                                    </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <div class="panel-footer text-center" id="footer">
            <h4>DesignTo服装设计服务平台</h4>
            <h5>Designer:
                <span class="glyphicon glyphicon-star" style="color: gold" aria-hidden="true"></span>Star</h5>
        </div>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="web/static/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="web/static/js/bootstrap.min.js"></script>
    <script src="web/static/js/main.js"></script>
</body>

</html>